<template>
  <div class="opertion-log">
    <el-card class="box-card">
      <!-- 查询区 -->
      <el-form
        ref="queryFormRef"
        :model="queryInfo"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="模块名" prop="operModule">
          <el-input
            v-model="queryInfo.operModule"
            clearable
            @keyup.enter.native="handleQuery"
            placeholder="请输入模块名搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="操作人" prop="operUserName">
          <el-input
            v-model="queryInfo.operUserName"
            @keyup.enter.native="handleQuery"
            clearable
            placeholder="请输入操作人搜索"
          ></el-input>
        </el-form-item>
        <el-form-item label="操作类型" prop="operType">
          <el-select
            v-model="queryInfo.operType"
            placeholder="请选择"
            clearable
          >
            <el-option label="GET" value="GET"></el-option>
            <el-option label="PUT" value="PUT"></el-option>
            <el-option label="POST" value="POST"></el-option>
            <el-option label="DELETE" value="DELETE"></el-option>
            <el-option label="PATCH" value="PATCH"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="操作时间">
          <el-date-picker
            v-model="dateRange"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="操作结果" prop="operResult">
          <el-select
            v-model="queryInfo.operResult"
            placeholder="请选择"
            clearable
          >
            <el-option label="成功" value="1"></el-option>
            <el-option label="失败" value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary" @click="handleQuery"
            >查询</el-button
          >
          <el-button size="mini" @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- 操作区 -->
      <div class="operation">
        <el-button
          size="mini"
          type="danger"
          icon="el-icon-delete"
          :disabled="selectLogLength === 0"
          @click="handleDelListLog"
          >批量删除</el-button
        >
      </div>
      <!-- 表格 -->
      <el-table
        ref="multipleTable"
        :data="logListData"
        tooltip-effect="dark"
        style="width: 100%;"
        v-loading="loading"
        :header-cell-style="{ background: '#f8f8f9', color: '#515a6e' }"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="expand">
          <template slot-scope="scope">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="请求路径">
                <span>{{ scope.row.operUri }}</span>
              </el-form-item>
              <el-form-item label="请求方法">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.operMethod"
                  placement="top-start"
                >
                  <span class="long-hidden">{{ scope.row.operMethod }}</span>
                </el-tooltip>
              </el-form-item>
              <el-form-item label="请求参数">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.operRequParam"
                  placement="top-start"
                >
                  <span class="long-hidden">{{ scope.row.operRequParam }}</span>
                </el-tooltip>
              </el-form-item>
              <el-form-item label="返回结果" v-if="scope.row.operResult">
                <el-tooltip
                  effect="dark"
                  :content="scope.row.operRespParam"
                  placement="top-start"
                >
                  <span class="long-hidden">{{ scope.row.operRespParam }}</span>
                </el-tooltip>
              </el-form-item>
              <el-form-item label="异常名称" v-if="!scope.row.operResult">
                <span>{{ scope.row.operExcName }}</span>
              </el-form-item>
              <el-form-item label="异常信息" v-if="!scope.row.operResult">
                <span>{{ scope.row.operExcMsg }}</span>
              </el-form-item>
              <el-form-item label="备注">
                <span>{{ scope.row.remark || "无" }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="55" label="#" />
        <el-table-column prop="operModule" label="操作模块" />
        <el-table-column
          prop="operDesc"
          label="操作描述"
          :show-overflow-tooltip="true"
        />
        <el-table-column prop="operType" label="请求方式" />
        <el-table-column prop="operUserName" label="操作人员" />
        <el-table-column
          prop="operIp"
          label="请求IP"
          width="130"
          :show-overflow-tooltip="true"
        />
        <el-table-column label="结果">
          <template slot-scope="{ row }">
            <el-tag type="success" size="mini" v-if="row.operResult"
              >成功</el-tag
            >
            <el-tag type="danger" size="mini" v-else>失败</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="操作时间"
          width="180"
          :show-overflow-tooltip="true"
        >
          <template slot-scope="{ row }">{{
            row.createTime | formatTime
          }}</template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="getLogListData"
        @current-change="getLogListData"
        :current-page.sync="queryInfo.pageNum"
        :page-sizes="[10, 20, 30]"
        :page-size.sync="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        >></el-pagination
      >
    </el-card>
  </div>
</template>

<script>
import { listLogApi, delListUserApi } from "@/api/operationLog";
export default {
  name: "OpertionLog",
  data() {
    return {
      queryInfo: {
        // 当前页
        pageNum: 1,
        // 页大小
        pageSize: 10,
        // 模块名
        operModule: "",
        // 操作人
        operUserName: "",
        // 降序
        isAsc: "desc",
        // 操作类型,设置成undefined，不会传递到后端
        operType: undefined,
        // 开始时间
        beginTime: undefined,
        // 结束时间
        endTime: undefined,
        // 操作结果
        operResult: undefined,
      },
      // 总条数
      total: 0,
      // 时间范围
      dateRange: [],
      multipleSelection: [],
      logListData: [],
      loading: false,
    };
  },
  created() {
    this.getLogListData();
  },
  watch: {
    dateRange(nVal) {
      if (nVal !== null) {
        this.queryInfo.beginTime = nVal[0];
        this.queryInfo.endTime = nVal[1];
      } else {
        this.queryInfo.beginTime = undefined;
        this.queryInfo.endTime = undefined;
      }
    },
  },
  computed: {
    selectLogLength() {
      return this.multipleSelection.length;
    },
  },
  methods: {
    async getLogListData() {
      try {
        this.loading = true;
        const { data, code } = await listLogApi(this.queryInfo);
        if (code !== 200) return;
        this.logListData = data.opers;
        this.total = data.total;
      } finally {
        this.loading = false;
      }
    },

    // 关键字查询
    handleQuery() {
      this.queryInfo.pageNum = 1;
      this.getLogListData();
    },
    // 重置表单
    handleReset() {
      this.dateRange = null;
      this.$refs.queryFormRef.resetFields();
      this.getLogListData();
    },

    // 批量删除
    handleDelListLog() {
      this.$confirm("此操作将永久删除选中的操作记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { code } = await delListUserApi(
            this.multipleSelection.map((item) => item.id)
          );
          if (code !== 200) return;
          this.getLogListData();
          this.$message.success("批量删除成功");
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    // 表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },
};
</script>

<style scoped lang="scss">
.operation {
  .el-button {
    margin-bottom: 18px;
  }
}
.el-pagination {
  margin: 18px 0px;
  float: right;
}
.operation-role-edit {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/deep/ .demo-table-expand {
  font-size: 0;
  label {
    width: 90px;
    color: #99a9bf;
  }
  .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
}
.long-hidden {
  display: inline-block;
  max-width: 400px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
